import React, { Component } from "react";
import styles from "./YgCategory.module.scss";
import store from "../../../store";
import { initCategoryDataAction } from "../../../store/actionCreators/cartAction";
import { connect } from "react-redux";
import {withRouter} from "react-router-dom"
class YgCategory extends Component {
  state = {
    select_index: 0,
  };
  componentDidMount() { 
    store.dispatch(initCategoryDataAction()); 
  }
  handleClick=(e)=>{
    console.log(e)
    this.setState({
      select_index:e
    })
  }
  handerGoToDetails=(cid)=>{
    this.props.history.push("/goodsdetails/"+cid)
  }
  render() {
    const category = this.props.category || [];
    let right_content =
      (category[this.state.select_index] &&
        category[this.state.select_index].children) ||
      [];
    
    return (
      <div className={styles.ygCatConnet}>
        <div className={styles.cLfet}>
          {category.map((v, index) => {
            return (
              <div
               onClick={this.handleClick.bind(this,index)}
                className={
               
                  styles.leftItem +
                  " " +
                  (this.state.select_index === index ? styles.active : "")
                }
                key={v.cat_id}
              >
                {v.cat_name}
              </div>
            );
          })}
        </div>

        <div className={styles.cRight}>
          {right_content.map((r, index) => {
            return (
              <div className={styles.rgihtItem} key={r.cat_id}>
                <div className={styles.rightTitle}>
                  {"/" + r.cat_name + "/"}
                </div>
                <div className={styles.rightlogoList}>
                {r.children &&
                  r.children.map((c, index) => {
                    return (
                      <div
                      onClick ={this.handerGoToDetails.bind(this,c.cat_id)}
                       className={styles.rightlogo} key={c.cat_id}>
                        <img src={c.cat_icon} alt="" />
                        <p className="title">{c.cat_name} </p>
                      </div>
                    );
                  })}
                </div>
              
              </div>
            );
          })}
        </div>
      </div>
    );
  }
}

export default connect((state) => {
  return {
    category: state.categoryReducer.category,
  };
}, null)(withRouter(YgCategory));
